<template>
  <div>
    <p>VUEX：状态管理器，用于管理vue项目中的一些重要变量</p>
    <p>这些变量会反复出现在项目中的许多地方，所以我们需要统一管理</p>
    <p>VUEX就是项目中的一个全局变量，可以在项目中的任何地方获取、修改</p>
    <p>
      <mark>更改 Vuex 的 store 中的状态(变量)的唯一方法是commit一个mutation</mark>
    </p>
    <p>dispatch -> action</p>
    <p>commit -> mutation</p>
    <br>
    <hr>
    <p>
      <mark>{{$store.state.count}}</mark>
      <button @click="add">+1</button>
      <button @click="addAsync">Async</button>
    </p>
    <p>getters:{{$store.getters.newCount}}</p>
    <p>getters:{{$store.getters.newCount}}</p>
    <p>getters:{{$store.getters.newCount}}</p>
    <p>getters:{{$store.getters.newCount}}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      
    }
  },
  created() {
    console.log('vuex:',this.$store.state.count)
  },
  methods: {
    add() {
      this.$store.commit('change1', {
        num1: 111,
        num2: 555
      })
    },
    addAsync() {
      setTimeout(() => {
        this.$store.dispatch('increment')
      }, 3000)
    }
  }
}
</script>

<style scoped>

</style>
